<template>
  <div class="container">
    <!--控制区域-->
    <div class="controls-wrapper">
      <div class="controls border-and-shadow">
        <!--第一行,kafka控制区域-->
        <kafka-connect :send-count="sendCount" @onSend="sendAll"></kafka-connect>
        <!--第二行,普通按钮-->
        <div>
          <button @click="selectAll">全选</button>
          <button @click="selectNone">全取消</button>
          <button @click="openDevtool">开启F12</button>
        </div>
      </div>
    </div>
    <!--消息区域-->
    <div class="messages">
      <div v-for="mapping in mappings"
           class="border-and-shadow business-frame">
        <div>
          <div>
            <input v-model="mapping.enabled" type="checkbox">
            <input v-model="mapping.messageCount" class="message-count" type="number">
            {{ mapping.system }}
          </div>
          <div>
            {{ mapping.topic }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KafkaConnect from './KafkaConnect/index.vue'
import {ipcRenderer} from 'electron'
import iotIO from '../api/IotYmlReader'
import {adjustMsg, adjustTimestamp, copyMsgAndChangeDevice, getMsg, msgTemplate} from '../api/IotMessageUtils'

export default {
  name: 'Iot',
  components: {KafkaConnect},
  data() {
    return {
      mappings: {}, // 从IotYmlReader.js中获取的kafka的mapping配置
      msgTemplate: {}, // 从IotMessageUtils.js中获取的消息模板
      sendCount: 0 // 发送的所有消息的数量,由父组件提供给子组件
    }
  },
  methods: {
    async openDevtool() {
      ipcRenderer.invoke('open-devtools', null)
    },
    sendAll() {
      // 发送kafka
      this.mappings.forEach(mapping => {
        if (!mapping.enabled) return
        // 每次发送都是调用getMsg方法
        let message = getMsg(mapping.system, mapping.subSystem, this.msgTemplate)
        message = adjustMsg(message) // 先调整所有字段的内容
        adjustTimestamp(message) // 后调整时间戳
        // 已在kafkaService.js中配置,发送kafka时,使用topic作为key
        ipcRenderer.invoke('sendMessageChannel', mapping.topic, JSON.stringify(message))
        this.sendCount++
        // 如果要发送的消息数量大于1,则创建出新的消息并发送(供电的不处理!因为它有values数组)
        if (mapping.messageCount && mapping.messageCount > 1 && mapping.system !== 'GD') {
          for (let i = 2; i <= mapping.messageCount; i++) {
            let newMsg = copyMsgAndChangeDevice(message, i)
            ipcRenderer.invoke('sendMessageChannel', mapping.topic, JSON.stringify(newMsg))
            this.sendCount++
          }
        }
      })
    },
    selectAll() { // 全选
      this.mappings.forEach(mapping => {
        mapping.enabled = true
      })
    },
    selectNone() { // 全取消选择
      this.mappings.forEach(mapping => {
        mapping.enabled = false
      })
    }
  },
  created() {
    // 调用iotIO.js,获取与exe同名的yml文件中的kafka的mappings配置
    this.mappings = iotIO.mappings
    console.log('Iot.vue中加载到的mappings:', this.mappings)
    // 遍历mappings,新增一个'数量'属性
    this.mappings.forEach(mapping => {
      mapping.messageCount = 1
    })
    // 调用IotMessageUtils.js,获取消息模板
    this.msgTemplate = msgTemplate
  }
}
</script>

<style scoped>
.message-count {
  width: 40px;
}
</style>
